<template>
  <div class="address-manager"
       :style="{background: type && type - '0' === 1 ? 'white' : '#f8f8f8'}">
    <div class="address-manager__title-contain">
      <div class="address-manager__contain">
        <ul class="address-manager__contain__contain"
            :style="getListStyle()"
            v-if="addressList!=null && addressList.length>0">
          <li v-for="(item,index) in addressList"
              :key="index">
            <components :is="componentsName[type && type - '0' === 1 ? 0 : 1]"
                        class="address-manager__contain__contain__cell"
                        :type='type'
                        :area="area"
                        :data="item"
                        @operaItem="operaItem"
                        @switchDefaultSelected="switchDefaultSelected"
                        :index="index"
                        @switchOrderSelected="switchOrderSelected"
                        :selectedIndex="selectedIndex"></components>
          </li>
        </ul>
        <!-- <div class="address-manager__contain__empty"
             v-if="addressList!=null && addressList.length==0">
          <img src="@image/icon_address_empty.png">
          <div style="color:#999999">您还没有收货地址~<br/>添加一个吧！</div>
          <button v-on:click="addAddress()">添加新地址</button>
        </div> -->
        <error-page imgWidth="200"
                    imgHeight="200"
                    v-if="addressList!=null && addressList.length==0"
                    emptyImg="icon_address_empty"
                    emptyDesc="<span style = 'color:RGBA(153, 153, 153, 1);font-size:0.30rem'>您还没有收货地址~<br/>添加一个吧！</span>">
          <button class="button"
                  v-on:click="addAddress()">添加新地址</button>
        </error-page>
        <div class="address-manager__contain__add-address"
             v-if="addressList!=null && addressList.length>0">
          <button class="btn__n"
                  style="z-index:200"
                  v-on:click="addAddress()"
                  v-if="type==0">添加新地址</button>
          <button class="address-manager__contain__add-address__button"
                  v-on:click="addAddress()"
                  v-if="type!=0">添加新地址</button>
        </div>
      </div>
    </div>
    <md-dialog :closable="false"
               class="father"
               v-model="actDialog.show"
               :btns="actDialog.btns">
      <span class="dialog-text">地址删除后不能恢复哦<br/>还要删除吗?</span>
    </md-dialog>
    <!-- <div class="address-manager__empty"></div> -->
  </div>
</template>

<script>
import managerAddress from './address-manager-cell'
import selectedAddress from './address-manager-selected'
import ErrorPage from '@/components/error-page'
import {Dialog} from 'mand-mobile'
import mixins from '@/mixins'
export default {
  name: 'address-manager',
  data () {
    return {
      componentsName: ['selectedAddress', 'managerAddress'],
      noAuthText: '', // 未完成认证的提示
      addressList: [],
      item: {
        name: '张三9',
        mobile: '18235180179',
        detailsAddress: '无'
      },
      area: '山西省太原市杏花岭区',
      selectedIndex: 0, // 当前选中“默认地址”的下标
      addid: '0',
      type: {
        type: Number,
        default: 0 // 为0 是管理收货地址，非零是 选择收货地址
      },
      actDialog: {
        show: false,
        btns: [
          {
            text: '确认删除',
            handler: this.dialogConfirm
          },
          {
            text: '我再想想',
            handler: this.dialogCancel
          }
        ]
      }
    }
  },
  mixins: [mixins],
  methods: {
    switchOrderSelected (index) {
      this.$cache.setCache(this.$cache.keys.addressOrder, this.addressList[index])
      this.$router.back()
    },
    dialogConfirm () {
      // 删除收货地址
    },
    dialogCancel () {
      this.actDialog.show = false
    },
    // 列表的样式
    getListStyle: function () {
      let left = 0
      let self = this
      if (self.type === 0) {
        left = 20
      }
      return {
        paddingLeft: self.toRem(left),
        paddingRight: self.toRem(left),
        background: '#f8f8f8',
        paddingBottom: self.toRem(left / 2)
      }
    },
    toRem (val) {
      return val / 100 + 'rem'
    },
    // 未认证时 的按钮宽度
    getButtonWidth: function () {
      let length = this.noAuthText.length
      return {
        width: length * 14 + 20 + 'px'
      }
    },
    // 点击了 某个条目的 “默认地址”
    switchDefaultSelected: async function (index) {
      // let self = this
      // 初始化传过去的数据
      let address = this.addressList[index]
      // 当前的 改为选中
      address.flag = '0'
      this.BIND_LOADING(true)
      await this.$ajax.post('/address/save.json', {
        ...address
      })
      this.requestNet()
    },
    goAudite: function () {
      this.$utils.routerbyuri('emeker://authinfo')
    },
    // 添加收货地址
    addAddress: function () {
      // util.routerbyuri('emeker://addaddress')
      // 打开 添加收货地址 页面
      this.$router.push({
        name: 'add-address',
        query: {
          isAdd: true
        }
      })
    },
    // opera 大于 0 为 编辑
    // opera 小于 0 为 删除
    operaItem: function (index, opera) {
      if (opera > 0) {
        this.$cache.setCache(this.$cache.keys.addressItem, this.addressList[index])
        this.$router.push({
          name: 'add-address',
          query: {
            // item: this.addressList[index],
            title: '修改收货地址',
            isAdd: false
          }
        })
      } else {
        this.actDialog.show = true
      }
    },
    setSelectedIndex: function () {
      let self = this
      this.addressList.map(function (key, value) {
        if (key.addid === self.addid) {
          self.selectedIndex = value
        }
      })
    },
    gettype: function (...ooo) {
      let typeMap = {
        '[object Null]': 'null',
        '[object Undefined]': 'undefined',
        '[object Number]': 'number',
        '[object String]': 'string',
        '[object Array]': 'array',
        '[object Object]': 'object',
        '[object Boolean]': 'boolean',
        '[object Function]': 'function'
      }
      // 传来的参数不为null
      if (ooo) {
        // 获取原型对象
        let type = Object.prototype.toString
        // 为了兼容之前的代码,如果参数只有一个
        if (ooo.length === 1) {
          return typeMap[type.call(ooo[0])]
        }
        // 参数有多个，拼接数组返回
        let arr = []
        ooo.map(function (key, value) {
          arr.push(typeMap[type.call(key)])
        })
        return arr
      }
      return ooo
    },
    async requestNet () {
      this.BIND_LOADING(true)
      this.addressList = await this.$ajax.get('/address/list.json')
      this.BIND_LOADING(false)
    }
  },
  async mounted () {
    // this.wxShare()
    let self = this
    await this.requestNet()
    // 选择收货地址，还是管理收货地址
    let type = this.$route.query.type

    // 默认选中的
    this.addid = this.$route.query.addid
    this.setSelectedIndex()
    type = type == null ? 0 : type
    if (this.gettype(type) === 'string') {
      self.type = parseInt(type)
    } else if (this.gettype(type) === 'number') {
      self.type = type
    } else {
      self.type = 1
    }

    if (self.type !== 0) {
      document.title = '选择收货地址'
    } else {
      document.title = '管理收货地址'
    }
  },
  components: {
    managerAddress,
    ErrorPage,
    selectedAddress,
    [Dialog.name]: Dialog
  }
}
</script>
<style lang="stylus" scoped>
// 设置背景为灰色
html, body, .address-manager {
  background: #f8f8f8;
  width: auto;
}

.address-manager {
  height: 100vh;
  width: 100%;

  .address-manager__title {
    position: fixed;
    z-index: 100;
  }

  .address-manager__noauth {
    width: 100%;
    height: 50%;
    font-size: 24px;
    display: flex;
    align-items: flex-end;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: row;
  }

  .address-manager__contain {
    padding-bottom: 110px;

    .address-manager__contain__contain {
      // margin-bottom: 125px;
      // margin-left: 20px;
      // margin-right: 20px;
      // padding-top: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .address-manager__contain__contain__cell {
        // margin-bottom: 20px;
      }
    }

    .button {
      width: 200px;
      height: 60px;
      border: 1px solid #f25f15;
      background: none;
      margin-top: 41px;
      color: #f25f15;
    }

    // .address-manager__contain__empty {
    // width: 100%;
    // height: 100%;
    // padding-top: 190px;
    // text-align: center;

    // img {
    // width: 200px;
    // height: 200px;
    // margin-bottom: 26px;
    // }

    // font-size: 28px;

    // }
    .address-manager__contain__add-address {
      background: white;
      position: fixed;
      z-index: 200;
      bottom: 0;
      height: 105px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;

      button {
        font-size: 34px;
      }

      .address-manager__contain__add-address__button {
        width: 710px;
        height: 70px;
        border-radius: 8px;
        background: white;
        border: 1px solid RGBA(174, 42, 38, 1);
        font-size: 34px;
        color: RGBA(174, 42, 38, 1);
      }
    }
  }
}
</style>
